﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>中日汉字转换改</title>
    <link rel="icon" href="" type="image/x-icon" />
    <script src='loadDictionary.js'></script>
    <script src="https://CDN.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-WP9NXG47');</script>
    <!-- End Google Tag Manager -->
    <script>
        function copy(str, isInput, ori) {
            var copyInput = document.createElement('input');
            document.body.appendChild(copyInput);
            copyInput.value = str;
            copyInput.select();
            document.execCommand("Copy");
            document.body.removeChild(copyInput);
            if (str.length == 0) {
                layer.msg('复制内容为空', { offset: 't5' });
            }
            else {
                layer.msg('复制成功！', { offset: 't5' });
            }
            if (isInput) {
                window.cinput.focus();
            }

        }
        function trans(ori) {
            var words = window.cinput.value.split('')
            var hexList = new Array();
            for (i = 0; i < words.length; i++) {
                if (window.invalidCharacter.indexOf(words[i]) > -1) {
                    // 无效字符，跳过处理
                }
                else if (window.shiftjis1List.indexOf(words[i]) > -1) {
                    // 已存在shiftjis第一梯队的汉字
                    // 黑色汉字
                    if (window.dictionary[words[i]] && window.dictionary[words[i]].length > 1) {
                        
                        // 含有多个对应汉字，在后面进行处理
                        
                        const character = window.dictionary[words[i]][0];
                        const unicode = character.charCodeAt(0);
                        const hex = "u" + unicode.toString(16).padStart(4, '0').toUpperCase();
                        
                        hexList.push({
                            hex16: hex,
                            kanji: character,
                            type: "trans", // 以trans方法进行处理，不影响后面颜色
                            all: window.dictionary[words[i]],
                            orgkanji: words[i]
                        })
                        words.splice(i, 1, character);
                    }
                    else {
                        const character = words[i];
                        const unicode = character.charCodeAt(0);
                        const hex = "u" + unicode.toString(16).padStart(4, '0').toUpperCase();
                        hexList.push({
                            hex16: hex,
                            kanji: character,
                            type: "intrans"
                        })
                    }
                }
                else if (window.dictionary[words[i]]) {
                    // shiftjis第一梯队转换的文字
                    // 蓝色汉字
                    if (window.dictionary[words[i]].length > 1) {
                        const character = window.dictionary[words[i]][0]; 
                        // 有多个对应的汉字

                    
                        const unicode = character.charCodeAt(0);
                        const hex = "u" + unicode.toString(16).padStart(4, '0').toUpperCase();

                        hexList.push({
                            hex16: hex,
                            kanji: character,
                            type: "trans",
                            all: window.dictionary[words[i]],
                            orgkanji: words[i]
                        })
                        words.splice(i, 1, window.dictionary[words[i]][0]);
                    }
                    else {
                        const character = window.dictionary[words[i]][0]; 
                        // 没有多个

                        const unicode = character.charCodeAt(0);
                        const hex = "u" + unicode.toString(16).padStart(4, '0').toUpperCase();

                        hexList.push({
                            hex16: hex,
                            kanji: character,
                            type: "trans"
                        })
                        words.splice(i, 1, window.dictionary[words[i]][0]);
                    }
                }
                else {
                    // 未找到的汉字？字符？
                    // 灰色汉字
                    const character = words[i]; // 获取字符
                    const unicode = character.charCodeAt(0);
                    const hex = "u" + unicode.toString(16).padStart(4, '0').toUpperCase();
                    hexList.push({
                        hex16: hex,
                        kanji: character,
                        type: "org"
                    })
                }
            }
            words = words.join('');
            window.jinput.value = words;


            let kanjiDomList = new Array();
            for (j = 0; j < hexList.length; j++) {
                if (hexList[j].all) {
                    let domAll = new Array();
                    for (k = 0; k < hexList[j].all.length; k++) {
                        let scharacter = hexList[j].all[k];
                        let sunicode = scharacter.charCodeAt(0);
                        let shex = "u" + sunicode.toString(16).padStart(4, '0').toUpperCase();
                        if (scharacter == hexList[j].orgkanji) {
                            domAll.push(`<a class="intrans" href="https://kanji.sljfaq.org/k/${shex}.html">${hexList[j].all[k]}</a>`)
                        }
                        else {
                            domAll.push(`<a class="trans" href="https://kanji.sljfaq.org/k/${shex}.html">${hexList[j].all[k]}</a>`)
                        }

                    }
                    domStr = domAll.join('/');
                    kanjiDomList.push(domStr)
                }
                else {
                    kanjiDomList.push(`<a class="${hexList[j].type}" href="https://kanji.sljfaq.org/k/${hexList[j].hex16}.html">${hexList[j].kanji}</a>`)
                }
            }
            kanjiListStr = kanjiDomList.join('    ');
            document.getElementById('kanjiList').innerHTML = kanjiListStr;
        }
        window.onload = function () {
            window.cinput = document.getElementById('chinese');
            window.jinput = document.getElementById('japanese');
            window.lock = false;
            window.cpend = false;

            window.cinput.addEventListener('compositionstart', function () {
                window.lock = true;
            })
            window.cinput.addEventListener('compositionend', function () {
                window.lock = false;
                trans('end');
            })

            window.cinput.oninput = function () {
                if (!window.lock) {
                    trans('oninput');
                }
            }
            document.getElementById('japanese').onclick = function () {
                copy(window.jinput.value, false, 'click');
            }
        }
    </script>
    <style>
        html {
            width: 100%;
        }

        body {
            width: 100%;
        }

        #globalContainer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .title-box {
            margin-top: 70px;
            position: absolute;
            left: 50%;
            top: 20%;
            transform: translate(-50%, -50%)
        }

        .input-box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        input {
            width: 500px;
            padding: 20px;
            margin: 10px;
            border-radius: 10px;
            border: 1px solid #e5e5e5;
            outline: none;
            box-sizing: border-box;
        }

        #japanese {
            font-family: Noto Sans JP, Noto Sans SC, Noto Sans TC, sans-serif;
        }

        #chinese {
            font-family: Noto Sans SC, Noto Sans JP, Noto Sans TC, sans-serif;
        }

        input:hover {
            border: 1px solid gray;
        }

        .kanji-list {
            position: absolute;
            left: 50%;
            top: 70%;
            transform: translate(-50%, -50%);
        }

        .kanji-list .trans {
            font-size: 1.5em;
            text-decoration: none;
        }

        .kanji-list .trans:visited {
            color: blue;
            /* 已访问的链接颜色也为蓝色 */
        }

        .kanji-list .intrans {
            color: black;
            font-size: 1.5em;
            text-decoration: none;
        }

        .kanji-list .org {
            color: grey;
            font-size: 1.5em;
            text-decoration: none;
        }

        .kanji-list a:hover {
            /* 下划线 */
            text-decoration:underline;
        }
    </style>
</head>


<body>
    <div id='globalContainer'>
        <a href="https://github.com/Huifusu/Hanzi2Kanji" class="github-corner" aria-label="View source on GitHub"><svg
                width="80" height="80" viewBox="0 0 250 250"
                style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                <path
                    d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                    fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                <path
                    d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                    fill="currentColor" class="octo-body"></path>
            </svg></a>
        <style>
            .github-corner:hover .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }

            @keyframes octocat-wave {

                0%,
                100% {
                    transform: rotate(0)
                }

                20%,
                60% {
                    transform: rotate(-25deg)
                }

                40%,
                80% {
                    transform: rotate(10deg)
                }
            }

            @media (max-width:500px) {
                .github-corner:hover .octo-arm {
                    animation: none
                }

                .github-corner .octo-arm {
                    animation: octocat-wave 560ms ease-in-out
                }
            }
        </style>
        <div class='title-box'>
            <h1>中日汉字转换改</h1>
        </div>

        <div class='input-box'>
            <div lang="zh-Hans">
                <input id='chinese' type="text" placeholder="请输入中文">
            </div>
            <div style="position: relative;" lang="ja">
                <input id='japanese' type="text" placeholder="コピーするにはクリック" readonly='' style="cursor:pointer;">
            </div>
        </div>
        <div class="kanji-list" id="kanjiList" lang="ja">
            <p></p>
        </div>
    </div>

</body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WP9NXG47"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</html>